<template>

	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block class="text-white" slot="content">房间详细</block>
		</cu-custom>

		<view class="bg-white">
			<view class="padding solid-bottom flex justify-start align-baseline">
				<view class="text-blue title">
					<text class="text-xxl  ">
						<text class="iconfont icon-fangjian"></text>
					</text>
					<text>房间</text>
				</view>
			</view>

			<view class="">
				<view class="cu-form-group">
					<view class="title">门店</view>
					<view>{{astore.sname}}</view>
				</view>
				<view class="cu-form-group">
					<view class="title">房间名</view>
					<view>{{room.rname}}</view>
				</view>
				<view class="cu-form-group">
					<view class="title">面积</view>
					<view>{{room.mj}}㎡</view>
				</view>
				<view class="cu-form-group">
					<view class="title">容纳人数</view>
					<view>{{room.rnrs}}</view>
				</view>
				<view class="cu-form-group">
					<view class="title">瑜伽垫数</view>
					<view>{{room.yjds}}</view>
				</view>
				<view class="cu-form-group">
					<view class="title">评分</view>
					<view><uni-rate v-model="room.rate"></uni-rate></view>
				</view>
				<view class="cu-form-group">
					<view class="title">类型</view>
					<view>{{tp[room.tp]}}</view>
				</view>
				<view class="cu-form-group">
					<view class="title">功能</view>
					<view>{{func[room.func]}}</view>
				</view>
				<view class="">
					<swiper class="screen-swiper" :indicator-dots="false" :circular="true" :autoplay="true"
						interval="2000" duration="500">
						<swiper-item v-for="(item,index) in room.imgs" :key="index">
							<image :src="item" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
				</view>


			</view>
		</view>
		<!-- <view class="padding ">
			<button @click="toYyjlNew" class="cu-btn block bg-blue lg">预约</button>
		</view> -->

		<!-- 课程信息 -->
		<view class="">
			<view class="padding-sm padding-right-xs bg-white flex text-orange justify-between align-baseline ">
				<view class=" title">
					<text class="text-xxl  ">
						<text class="iconfont icon-kecheng "></text>
					</text>
					<text class="">课程</text>
				</view>
				<view @tap="gotoKcList" class="">
					<text class=" ">更多</text>
					<text class="  ">
						<text class="iconfont icon-arrowright"></text>
					</text>
				</view>
			</view>
			<view class="padding-xs">
				<view class="bg-white shadow radius margin-bottom-xs" v-for="(kc,index) in akechengs" :key="index">
					<kc-item :kc="kc"></kc-item>
				</view>
			</view>
		</view>
		
		<!-- 评价信息 -->
		<view v-if="aroompjs.length > 0" class="margin-top">
			<view class="cu-bar bg-white text-blue solid-bottom">
				<view class="action">
					<text class="cuIcon-titles  "></text> 评价信息
				</view>
				<view @tap="gotoPjList">
					<text class=" ">更多</text>
					<text class="  ">
						<text class="iconfont icon-arrowright"></text>
					</text>
				</view>
			</view>
			<view class=" bg-white">
				<view class="padding" v-for="(pj,index) in aroompjs" :key="index">
					<view class="shadow bg-white flex justify-start">
						<view class="cu-avatar round xl margin-xs" :style="{backgroundImage: `url(${pj.jcover})`}"></view>
						<view class="flex flex-direction justify-start">
							<view class="padding-xs flex justify-between align-center">
								<text>{{pj.jname}}</text>
								<uni-rate v-model="pj.count"></uni-rate>
							</view>
							<view class="padding-xs">{{pj.content}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				room: {
					rate: 4.5,
				},
				astore: {},
				akechengs: [],
				ajiaolians: [],
				aroompjs: [],
				func: {},
				tp: {}
			};
		},
		created: function(){
			this.func = this.constant.roomfunc.ROOMFUNC;
			this.tp = this.constant.roomtp.ROOMTP;
		},
		onLoad: function(option){
			this.room.roomid = option.roomid;
			this.loadRoom();
		},
		methods: {
			loadRoom: function() {
				this.api("/room/info/get").send({
					roomid: this.room.roomid
				}).then(data => {
					this.room = data.room;
					this.astore = data.astore;
					this.akechengs = data.akechengs;
					this.ajiaolians = data.ajiaolians;
					this.aroompjs = data.aroompjs;
				});
			},
			gotoPjList: function() {
				uni.navigateTo({
					url: '/pages/cdz/fj/pjlist?roomid='+this.room.roomid
				});
			},
			gotoKcList: function() {
				uni.navigateTo({
					url: '/pages/cdz/kc/list?roomid='+this.room.roomid
				});
			},
		}
	}
</script>

<style>
	.roomtitle {
		position: absolute;
		bottom: 0;
		width: 100%;
		display: flex;
		align-items: start;
		min-height: 100rpx;
		justify-content: space-between;
		flex-direction: column;
	}

	.roomtitle text {
		padding: 0.3rem;
	}
</style>